<template>
	<div>
		<div class="detail" v-html="body" refs='body'></div>
		<div class="tabbar">
			<ul>
				<li>
					<van-icon name="arrow-left" />
				</li>
				<li>
					<van-icon name="comment-circle-o" />
				</li>
				<li @click="give">
					<van-icon name="thumb-circle-o" class="dianzan"/>
					<van-icon name="thumb-circle" class="iconcolor" v-show="shi"/>
				</li>
				<li @click="collection">
					<van-icon name="star-o"/>
					<van-icon name="star" class="iconcolor" v-show="xian"/>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				body:"",
				css:'',
				img:'',
				h3:'',
				p:'',
				receive:'',
				like:'',
				islike:'',
				collect:'',
				iscollect:'',
				uid:'',
				access_token:'',
				xian:false,
				shi:false
			}
		},
		mounted() {
			this.getlistdata()
			this.likeStatus()
		},
		updated() {
			this.add_link()
		},
		methods:{
			getlistdata:function(){
				this.$http.get('http://chonghekj.com/daily/index.php/Home/daily/detail',{
					params:{
						id:this.$route.query.id
					}
				})
				.then((res)=>{
					
					this.body = res.data.body
					this.css = res.data.css
					this.img = res.data.image
					this.h3 = res.data.title
					this.p = res.data.image_source
					console.log(res)
					console.log(res.data.id)
					localStorage.setItem('shoucang',JSON.stringify({
						id:res.data.id,
					}))
				})
			},
			// <link rel="stylesheet" href="">
			add_link:function(){
				let link = document.createElement('link')
				let img = document.createElement('img')
				let h3 = document.createElement('h3')
				let p = document.createElement('p')
				// 属性rel
				link.rel = 'stylesheet'
				link.href = this.css
				img.src = this.img
				h3.innerText = this.h3
				p.innerText = this.p
				document.querySelector('.detail').insertBefore(link,this.$refs.body)
				document.querySelector('.img-place-holder').append(img)
				document.querySelector('.img-place-holder').append(h3)
				document.querySelector('.img-place-holder').append(p)
			},
			give:function(){
				this.receive=JSON.parse(localStorage.getItem('userinfo'))
				this.uid = this.receive.id
				this.access_token = this.receive.access_token
				this.$http.post('http://chonghekj.com/daily/index.php/Home/daily/doAct',this.$qs.stringify({
					pid:this.$route.query.id,
					uid:this.uid,
					access_token:this.access_token,
					acttype:'like'
				}))
				.then((res)=>{
					console.log(res)
					this.likeStatus()
					// this.add_link()
				})
			},
			collection:function(){
				this.receive=JSON.parse(localStorage.getItem('userinfo'))
				this.$http.post('http://chonghekj.com/daily/index.php/Home/daily/doAct',this.$qs.stringify({
					pid:this.$route.query.id,
					uid:this.receive.id,
					access_token:this.receive.access_token,
					acttype:'collect',
				}))
				.then((res)=>{
					console.log(res)
					// this.getlistdata()
					this.getcollect()
				})
			},
			likeStatus:function(){
				this.receive=JSON.parse(localStorage.getItem('userinfo'))
				this.$http.post('http://chonghekj.com/daily/index.php/Home/daily/detailState',this.$qs.stringify({
					pid:this.$route.query.id,
					uid:this.receive.id,
					access_token:this.receive.access_token,
				}))
				.then((res)=>{
					console.log(res)
					this.like = res.data.data.like
					this.islike = res.data.data.islike
					if(this.like == 0){
						this.shi = false
					}else{
						this.shi = !this.shi
					}
				})
			},
			getcollect:function(){
				this.receive=JSON.parse(localStorage.getItem('userinfo'))
				this.$http.post('http://chonghekj.com/daily/index.php/Home/daily/detailState',this.$qs.stringify({
					pid:this.$route.query.id,
					uid:this.receive.id,
					access_token:this.receive.access_token,
				}))
				.then((res)=>{
					console.log(res)
					this.collect = res.data.collect
					this.iscollect = res.data.iscollect
					if(this.collect == 0){
						this.xian = false
					}else{
						this.xian = !this.xian
					}
// 					this.$route.push({
// 						path:'/myCollection'
// 					})
				})
			}
		}
	}
</script>

<style lang="less">
	*{
		margin: 0;
		padding: 0;
	}
	.img-place-holder{
		position: relative;
		height: auto !important;
	}
	.headline h3{
		padding: 0 30px;
		position: absolute;
		bottom: 40px;
		left: 0;
		color: #fff;
	}
	.headline p{
		position: absolute;
		bottom: 0;
		right: 20px;
		color: #f2f3f5;
	}
	.tabbar{
		width: 100%;
		height: 50px;
		background: #F4F4F4;
		position: fixed;
		bottom: 0;
		ul{
			padding: 0;
			display:flex;
			justify-content: space-around;
		}
		ul li{
			padding:11px 20px;
			border-bottom: none;
			display: inline-block;
			position: relative;
			.van-icon{
				font-size: 28px;
			}
			.iconcolor{
				color: #42A3F4;
				position:absolute;
				top: 11px;
				left: 20px;
			}
		}
		ul li:nth-child(1){
			border-right: 1px solid #ddd;
		}
	}
</style>
